<template>
  <div class="cesium-container">
    <div ref="cesiumContainer" class="cesium-map"></div>
  </div>
</template>

<script>
import {onMounted, ref} from 'vue';
import * as Cesium from 'cesium';
import stationData from '@/data/stationData.json';

export default {
  name: 'MainView',
  setup() {
    const cesiumContainer = ref(null);

    // 加载高德地图影像
    function loadGaoDeImageryLayers(viewer, type) {
      let imageryProvider;
      if (type === 0) {
        // 高德矢量图
        imageryProvider = new Cesium.UrlTemplateImageryProvider({
          url: 'http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
          minimumLevel: 3,
          maximumLevel: 18,
        });
      } else if (type === 1) {
        // 高德影像
        imageryProvider = new Cesium.UrlTemplateImageryProvider({
          url: 'https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
          minimumLevel: 3,
          maximumLevel: 18,
        });
      } else if (type === 2) {
        // 高德路网中文注记
        imageryProvider = new Cesium.UrlTemplateImageryProvider({
          url: 'http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8',
          minimumLevel: 3,
          maximumLevel: 18,
        });
      }

      if (imageryProvider) {
        viewer.imageryLayers.addImageryProvider(imageryProvider);
      }
    }

    onMounted(() => {
      // 初始化 Cesium Viewer
      const viewer = new Cesium.Viewer(cesiumContainer.value, {
        terrainProvider: new Cesium.EllipsoidTerrainProvider(),
        baseLayerPicker: false,
        geocoder: false,
        animation: false,
        timeline: false,
        fullscreenButton: false,
        imageryProvider: false, // 禁用默认的影像图层
      });

      // 加载高德地图影像（矢量图，影像图或路网中文注记）
      loadGaoDeImageryLayers(viewer, 1); // 加载高德影像图。可以改为 0 或 2 加载不同类型的图层。

      // 聚焦中国区域
      viewer.camera.setView({
        destination: Cesium.Cartesian3.fromDegrees(104.1954, 35.8617, 10000000),
      });

      // 加载站点数据并在地图上显示标记
      stationData.forEach((station) => {
        const {经度: lon, 纬度: lat, 站名: name} = station;

        viewer.entities.add({
          position: Cesium.Cartesian3.fromDegrees(lon, lat),
          point: {
            pixelSize: 5,
            color: Cesium.Color.RED,
          },
          label: {
            text: name,
            font: '14px sans-serif',
            fillColor: Cesium.Color.WHITE,
            style: Cesium.LabelStyle.FILL_AND_OUTLINE,
            outlineWidth: 2,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          },
        });
      });

      // 自动缩放视角以包含所有标记
      viewer.zoomTo(viewer.entities);
    });

    return {cesiumContainer};
  },
};
</script>

<style scoped>
.cesium-container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.cesium-map {
  width: 100%;
  height: 100%;
}
</style>
